<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-09-06 14:22:31
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-09-18 15:06:17
 * @FilePath: \ft-apply-admin\src\views\ApplicationList\components\CropperDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <BasicModal :show="open" title="图片裁剪" width="30%" @comfirm="determine" :widthComfirm="true"
      @close="$emit('cancel');determine()">
      <template #content>
        <CropperImage ref="refCropper" :src="props.imageUrl" v-if="open" @cropend="handleCropend"
          style="width: 100%; height: 400px" />
      </template>
    </BasicModal>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from 'vue';
import { CropperImage } from '@/components/Cropper';
import BasicModal from "../../ApplicationList/components/BasicModal.vue";
const { proxy } = getCurrentInstance()
const props = defineProps({
  imageUrl: String,
  aspectRatio: {
    type: Number,
    default: 1
  },
  showCropper: {
    type: Boolean,
    default: false
  }
});
const open = ref(false)
watch(() => props.showCropper, (val) => {
  open.value = val
}, { immediate: true })
const imgBase64Url = ref("")

const emit = defineEmits(['cropped']);
const refCropper = ref(null);
const handleCropend = ({ imgBase64, imgInfo }) => {
  imgBase64Url.value = imgBase64
}

const determine = ()=>{
  emit('cropped', imgBase64Url.value);
}
</script>